<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!--1.画圆型
		    2.画正三角形
		思路1：     html     div元素
				   css		倒角，必须有边框
		思路2：     html 	div元素 triangle
				   css   	斜边
							不设置宽高
							左边框：50像素实线红色  transpatent
							有边框：50像素实线黄色  transpatent
							下边框：50像素实现蓝色，透明度  .3
							颜色值：rgba(255，255，0，.3)
		-->
		<style>
			 /*1.画圆*/
			 div#circle{
				 width:200px;
				 height: 200px;
				 border: 1px solid red;
				 border-radius: 50%;
				 /*边框阴影属性 box-shadow属性*/
				 box-shadow:5px 5px 50px 10px red inset ;
			 }
			 /*2.正三角形*/
			 div#triangle{
				 width:0;
				 /*border:50px solid transparent;
				 border-bottom-color:rgba(0,0,255,.3);*/
				 /*两行：全部设置为透明色，上面的三角设置颜色*/
				 border:50px solid transparent;
				 border-bottom-color:rgba(0,0,255,.3);
			 }
			 input{
				 outline: 1px solid red;
				 outline: 0;/*去掉边框效果，通配选择器中*/
			 }
		</style>
	</head>
	
	<body>
		<div></div>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text"1>
	</body>
</html>